<template>
  <!-- 全屏作者信息弹框 -->
  <div v-if="show" class="author-modal-overlay" @click="$emit('close')">
    <div class="author-modal" @click.stop>
      <!-- 返回按钮 -->
      <button
        @click="$emit('close')"
        class="absolute top-4 left-4 z-50 text-white bg-black bg-opacity-50 p-2 rounded-full pb"
      >
        <i class="fas fa-close"></i>
      </button>

      <!-- 内容区域 -->
      <div class="modal-content">
        <!-- 剧集信息区域 -->
        <section class="drama-info mt-10">
          <img :src="dramaInfo.cover" :alt="dramaInfo.title" class="drama-poster" />

          <div class="drama-details">
            <h1 class="drama-title">{{ dramaInfo.title }}</h1>
            <!-- <div class="drama-tags">{{ dramaInfo.tags.join(' ') }}</div> -->
            <div class="view-count">{{ dramaInfo.viewCount }}次观看</div>
            <div class="rating-container">
              <span class="rating">{{ dramaInfo.likeCount }}分</span>
              <!-- <a href="#" class="rating-btn">去评价 →</a> -->
            </div>
          </div>
        </section>

        <!-- 剧情简介区域 -->
        <section class="synopsis-section">
          <h2 class="section-title">剧情简介</h2>

          <div class="actors-slider">
            <div class="actor" v-for="(actor, index) in dramaInfo.actors" :key="index">
              <img :src="actor.avatar" :alt="actor.name" class="actor-avatar" />
              <div class="actor-info">
                <span class="actor-name">{{ actor.name }}</span>
                <span class="actor-works">{{ actor.role }}</span>
              </div>
            </div>
          </div>

          <p class="synopsis-text">{{ dramaInfo.description }}</p>
        </section>

        <!-- 剧集列表区域 -->
        <section class="episodes-section">
          <div class="episodes-header">
            <h2 class="section-title">
              <span>剧集</span>
              <span class="total-episodes">全{{ dramaInfo.totalEpisodes }}集</span>
            </h2>
          </div>

          <div class="episode-grid">
            <button
              class="episode-btn"
              v-for="(episode, index) in dramaInfo.videos"
              :key="index"
              :class="index === currentVideoIndex ? 'currentTag' : ''"
              @click="selectEpisode(episode, index)"
            >
              {{ index + 1 }}
            </button>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reqDramaDetail } from '@/apis/video'

const router = useRouter()

const props = defineProps({
  currentEpisodeIndex: {
    type: Number,
    default: 0
  },
  show: {
    type: Boolean,
    default: false
  },
  videoData: {
    type: Object,
    default: () => ({})
  },
  flag: {
    type: String,
    default: 'card'
  }
})

const emit = defineEmits(['close', 'select-episode'])

const dramaInfo = ref({})

const currentVideoIndex = computed(() => props.currentEpisodeIndex || 0)

const getDramaDetail = async (dramaId) => {
  try {
    const response = await reqDramaDetail(dramaId)
    dramaInfo.value = response.data || {}

    console.log('获取到的剧集详情:', dramaInfo.value)
  } catch (error) {
    // console.error('获取剧集详情失败:', error)
  }
}

const selectEpisode = async (episode, index) => {
  if (index === currentVideoIndex.value) {
    return
  }

  // console.log('选择的剧集:', episode, '索引:', index)

  // if (props.flag === 'featured') {
  //   // 如果是卡片模式，点击剧集按钮时关闭弹框
  //   // router.push({
  //   //   name: 'Player',
  //   //   params: {
  //   //     dramaId: props.videoData.dramaId || props.videoData.drama.id,
  //   //     episodeIndex: index
  //   //   }
  //   // })

  //   return
  // }
  // currentVideoIndex.value = index
  emit('select-episode', { episode, index })
}

watch(
  () => props.videoData,
  (newVal) => {
    if (newVal) {
      getDramaDetail(newVal.dramaId || newVal.drama.id)
    }
  }
)
</script>

<style scoped lang="scss">
.currentTag {
  background-color: #ffcc00 !important;
  color: #000000 !important;
  font-weight: 600 !important;
}

// 剧集信息区域
.drama-info {
  padding: 0 15px;
  display: flex;
  margin-bottom: 20px;

  .drama-poster {
    width: 110px;
    height: 165px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
  }

  .drama-details {
    margin-left: 13px;
    flex-grow: 1;

    .drama-title {
      font-size: 19px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .drama-tags {
      font-size: 13px;
      color: #b3b3b3;
      margin-bottom: 10px;
    }

    .view-count {
      background-color: #2d2d2d;
      color: #ffffff;
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 4px;
      display: inline-block;
      margin-bottom: 12px;
    }

    .rating-container {
      display: flex;
      align-items: center;

      .rating {
        font-size: 18px;
        color: #ffcc00;
        font-weight: 600;
        margin-right: 8px;
      }

      .rating-btn {
        color: #b3b3b3;
        font-size: 13px;
        text-decoration: none;
      }
    }
  }
}

.section-title {
  font-weight: 600;
  margin-bottom: 12px;
  color: #ffffff;

  span {
    &:first-child {
      font-size: 17px;
      margin-right: 10px;
    }
  }
}

// 剧情简介区域
.synopsis-section {
  padding: 0 15px;
  margin-bottom: 25px;

  .actors-slider {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-bottom: 12px;
    padding: 8px 0;

    .actor {
      display: flex;
      align-items: center;

      .actor-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 6px;
      }

      .actor-info {
        display: flex;
        flex-direction: column;

        .actor-name {
          font-size: 13px;
          color: #ffffff;
        }

        .actor-works {
          font-size: 11px;
          color: #999999;
        }
      }
    }
  }

  .synopsis-text {
    font-size: 14px;
    color: #e0e0e0;
    line-height: 1.6;
  }
}

// 剧集列表区域
.episodes-section {
  padding: 0 15px;
  margin-bottom: 25px;

  .episodes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .total-episodes {
      font-size: 14px;
      color: #b3b3b3;
      font-weight: normal;
    }
  }

  .episode-tabs {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid #2d2d2d;

    .tab {
      font-size: 15px;
      padding: 8px 0;
      margin-right: 25px;
      color: #b3b3b3;
      border-bottom: 2px solid transparent;
      cursor: pointer;

      &.active {
        color: #ffffff;
        border-bottom-color: #ffcc00;
      }
    }
  }

  .episode-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;

    .episode-btn {
      background-color: #2d2d2d;
      border: none;
      border-radius: 4px;
      color: #ffffff;
      padding: 12px 0;
      font-size: 14px;
      cursor: pointer;

      &.watched {
        background-color: #3d3d3d;
        color: #888888;
      }

      &.current {
        background-color: #ffcc00;
        color: #000000;
        font-weight: 600;
      }
    }
  }
}

// 推荐内容区域
.recommendations-section {
  padding: 0 15px;

  .recommendations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    .refresh-btn {
      color: #b3b3b3;
      font-size: 13px;
      text-decoration: none;
      display: flex;
      align-items: center;

      .refresh-icon {
        margin-right: 4px;
        font-size: 14px;
      }
    }
  }

  .recommendations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;

    .recommendation-item {
      display: flex;
      flex-direction: column;

      .recommendation-poster {
        width: 100%;
        border-radius: 4px;
        aspect-ratio: 2/3;
        object-fit: cover;
        margin-bottom: 8px;
      }

      .recommendation-title {
        font-size: 13px;
        color: #ffffff;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
      }

      .recommendation-tags {
        font-size: 11px;
        color: #999999;
      }
    }
  }
}

/* 全屏弹框样式 */
.author-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.author-modal {
  background: #fff;
  width: 100%;
  max-width: 500px;
  margin: 0;
  position: fixed;
  bottom: 0;
  top: 0;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease-out;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
  background-color: #121212;
}

.modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #e9ecef;
  color: #333;
}

.modal-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  background-color: #121212;
}

.drama-info {
  text-align: left;
}

.drama-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20px;
}

.detail-item {
  margin-bottom: 16px;
}

.detail-item label {
  display: block;
  font-weight: 600;
  color: #555;
  margin-bottom: 8px;
  font-size: 14px;
}

.detail-item p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.actors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.actor-tag {
  background: #e3f2fd;
  color: #1976d2;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .author-modal {
    margin: 0;
    position: fixed;
    bottom: 0;
    top: 0;
    max-height: 100vh;
  }

  .author-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  @keyframes modalSlideIn {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}
</style>
